<template>
  <div>
    <h1>《前端框架应用项目开发》期末作品投票</h1>
    <p>投票时间：2024/05/15 ~ 2024/05/20</p>

    <el-input
        placeholder="输入查找"
        v-model="searchQuery"
        clearable
    ></el-input>

    <el-table
        :data="filteredProjects"
        style="width: 100%"
    >
      <el-table-column
          prop="id"
          label="编号"
          width="100"
      ></el-table-column>
      <el-table-column
          prop="name"
          label="作品名称"
          width="200"
      ></el-table-column>
      <el-table-column
          prop="teacher"
          label="指导老师"
          width="150"
      ></el-table-column>
      <el-table-column
          label="票数"
      >
        <template slot-scope="scope">
          <p>公众票: {{ scope.row.publicVotes }}</p>
          <p>评委票: {{ scope.row.judgeVotes }}</p>
          <p>总分: {{ scope.row.totalScore }}</p>
        </template>
      </el-table-column>
      <el-table-column
          label="作品封面"
          width="150"
      >
        <template slot-scope="scope">
          <img :src="scope.row.coverImage" :alt="scope.row.name" style="max-width: 100%; height: auto;">
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalProjects"
    ></el-pagination>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    // 假设的项目列表数据
    const projects = ref([
      // ... 这里填充你的项目数据
    ]);

    // 搜索查询
    const searchQuery = ref('');

    // 分页
    const currentPage = ref(1);
    const pageSize = ref(20);

    // 计算过滤后的项目列表
    const filteredProjects = computed(() => {
      // 使用searchQuery来过滤projects
      // 这里只是一个简单的示例，你可能需要实现更复杂的搜索逻辑
      return projects.value.filter(project =>
          project.name.toLowerCase().includes(searchQuery.value.toLowerCase())
      );
    });

    // 总项目数
    const totalProjects = computed(() => filteredProjects.value.length);

    // 分页方法
    function handleSizeChange(val) {
      pageSize.value = val;
      // 可能需要重置到第一页
      currentPage.value = 1;
    }

    function handleCurrentChange(val) {
      currentPage.value = val;
    }

    // 注意：这里我们没有实际实现分页数据加载，
    // 在真实应用中，你需要根据currentPage和pageSize来从服务器加载数据

    return {
      projects,
      searchQuery,
      filteredProjects,
      currentPage,
      pageSize,
      totalProjects,
      handleSizeChange,
      handleCurrentChange,
    };
  },
};
</script>

<style scoped>
/* 你的样式代码可以放在这里 */
</style>